<div ng-controller="tooltipDemoCtrl">
    <h4>方位选择</h4>
    <div class="form-group">
        <label>Tooltip 方位</label>
        <select class="form-control" ng-model="placement.selected" ng-options="o as o for o in placement.options"></select>
    </div>
    <button tooltip-placement="{{placement.selected}}" uix-tooltip="On the {{placement.selected}}" type="button" class="btn btn-default">Tooltip {{placement.selected}}</button>
    <hr />
    <div class="form-group">
        <label>动态的tooltip</label>
        <input type="text" ng-model="dynamicTooltipText" class="form-control">
    </div>
    <div class="form-group">
        <label>动态的tooltip内容</label>
        <input type="text" ng-model="dynamicTooltip" class="form-control">
    </div>
    <p>
        修改上述内容生成显示<a href="#" uix-tooltip="{{dynamicTooltip}}">{{dynamicTooltipText}}</a>,
        去除动画效果的<a href="#" tooltip-animation="false" uix-tooltip="我没有动画效果">tooltip</a>
    </p>
    <hr>
    <h4>显示/隐藏延迟效果</h4>
    <div class="form-group">
        <label>延迟时间</label>
        <div class="input-group">
            <input type="number" class="form-control" ng-model="delayTime">
                <span class="input-group-btn">
                    <button class="btn btn-default">ms</button>
                </span>
        </div>
    </div>
    <p>
        为tooltip设置显示延迟时间<a href="#" tooltip-popup-delay="{{delayTime}}" uix-tooltip="延迟{{delayTime}}ms显示">show delay</a>.
        设置隐藏延迟时间<a href="#" tooltip-popup-close-delay="{{delayTime}}" uix-tooltip="延迟{{delayTime}}ms隐藏">hide delay</a>
    </p>


    <p>
        包含HTML内容的工具提示. <a href="#" uix-tooltip-html="htmlTooltip">戳一戳!</a>
    </p>

    <p>
        设置自定义class指定样式.I can have a custom class. <a href="#" uix-tooltip="I can have a custom class applied to me!" tooltip-class="customClass">Check me out!</a>
    </p>

    <form role="form">
        <div class="form-group">
            <label>使用focus事件来显示tooltip,blur事件隐藏</label>
            <input type="text" value="Click me!" uix-tooltip="See? Now click away..." tooltip-trigger="focus" tooltip-placement="bottom" class="form-control" />
        </div>

        <div class="form-group" ng-class="{'has-error' : !inputModel}">
            <label>有条件地显示隐藏tooltip:</label>
            <input type="text" ng-model="inputModel" class="form-control"
                   placeholder="输入框内容为空并且mouseenter的时候才会显示tooltip"
                   uix-tooltip="Enter something in this input field to disable this tooltip"
                   tooltip-placement="top"
                   tooltip-trigger="mouseenter"
                   tooltip-enable="!inputModel" />
        </div>
    </form>
    <h4>自定义模板</h4>
    可以显示自定义<a href="#" uix-tooltip-template="'templateId.html'">模板</a>的内容
    <script type="text/ng-template" id="templateId.html">
        <p>This is the content of the template</p>
        <h1>Hello</h1>
    </script>
</div>